<template>
	<popup v-model="show">
		<view class="layer flex" :style="{ '--fss': app.theme.fss() }">
			<view class="transverse-line flex">
				<view class="transverse-line-view"></view>
			</view>
			<view class="userTitle">账号注销</view>
			<image src="/static/img/waring.png" mode="widthFix" class="waring"></image>
			<view class="userDesc">
				警告：一旦进入账号注销流程，将不可逆转。以下有关该账号的信息将被彻底删除：
			</view>
			<view class="infoList">
				1. 所有记录如 对话、绘画、视频创作等<br />
				2. 会员开通记录和会员资格<br />
				3. 当前剩余的试用次数<br />
				4. 手机号码、头像等基本信息
			</view>
			<view class="pcon-btn flex">
				<text class="pcon-item pcon-cancel" @tap="close">算了</text>
				<text v-if="countDown" class="pcon-item pcon-active dis">{{ countDown }}s后可注销</text>
				<text v-else class="pcon-item pcon-active" @tap="handleShutdown">开始注销</text>
			</view>
			<footer-bar></footer-bar>
		</view>
	</popup>
</template>

<script setup>
	import { ref, inject, defineExpose, onUnmounted } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 倒计时
	const countDown = ref(0);
	
	// 倒计时事件
	const countDownTimer = ref(null);
	
	
	/* 方法区域 */
	// 打开弹窗
	function open() {
		show.value = true;
		countDown.value = 15;
		clearInterval(countDownTimer.value);
		countDownTimer.value = setInterval(() => {
			countDown.value--;
			if (countDown.value === 0) {
				clearInterval(countDownTimer.value);
			}
		}, 1000);
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	
	// 处理注销
	function handleShutdown() {
		app.request.ajax({
			url: "/api/user/off",
			method: "POST",
			load: true,
			success(res){
				app.util.loginExit();
			}
		});
	}
	
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
	
	// 组件被销毁时
	onUnmounted(() => {
		clearInterval(countDownTimer.value);
	});
</script>

<style scoped lang="scss">
	.layer {
		background: #232526;
		border-radius: 15rpx 15rpx 0 0;
		overflow: hidden;
		flex-direction: column;
		width: 100vw;
		padding: 0 33rpx 30rpx 33rpx;
		position: relative;
		.waring {
			position: absolute;
			right: 50rpx;
			top: 80rpx;
			width: 70rpx;
		}
		.userTitle {
			font-weight: bold;
			font-size: calc(38rpx * var(--fss));
			line-height: 70rpx;
			position: relative;
			color: rgba(255, 255, 255, 0.9);
			&:after {
				content: "";
				position: absolute;
				bottom: -20rpx;
				left: 0;
				width: 70rpx;
				height: 8rpx;
				background-color: $background;
			}
		}
		.userDesc {
			font-size: calc(26rpx * var(--fss));
			color: rgba(255, 255, 255, 0.6);
			line-height: 42rpx;
			margin-top: 70rpx;
		}
		.infoList {
			background: rgba(255,255,255,0.03);
			font-size: calc(26rpx * var(--fss));
			line-height: 58rpx;
			border-radius: 7rpx;
			margin-top: 30rpx;
			padding: 22rpx 33rpx;
			color: rgba(255, 255, 255, 0.7);
		}
		.pcon-btn {
			width: 100%;
			align-items: center;
			flex-direction: row;
			margin-top: 30rpx;
			.pcon-item {
				text-align: center;
				font-size: calc(28rpx * var(--fss));
				line-height: 73rpx;
				border-radius: 100rpx;
				transition: 0.2s all;
				&.pcon-cancel {
					margin-right: 22rpx;
					background: rgba(255, 255, 255, 0.06);
					color: rgba(255, 255, 255, 0.9);
					width: 0;
					flex: 1;
					transition: 0.2s all;
					&:active {
						opacity: 0.8;
					}
				}
				&.pcon-active {
					flex: 1;
					width: 0;
					background: #444648;
					color: rgba(255, 255, 255, 0.9);
					transition: 0.2s all;
					&.dis {
						opacity: 0.6;
					}
					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>